<template>
    <div class="edit-popup">
        <popup title="查看工程款支付申请单" ref="popupRef" :async="true" width="1350px" :footershow="false" :clickModalClose="false">
            <div class="bor">
                <div class="zhangMain">
                    <!-- 请款单审核状态 -->
                    <img v-if="orderData.order_status == '1'" class="zhang" :src="daiishenhe" />
                    <template v-if="orderData.order_status == '2'">
                        <!-- 付款单支付状态 -->
                        <img v-if="orderData.payment_status == '1'" class="zhang" :src="yifukuan" />
                        <img v-else-if="orderData.payment_status == '2'" class="zhang" :src="daizhifu" />
                        <img v-else-if="orderData.payment_status == '3'" class="zhang" :src="bufenzhifu" />
                    </template>
                </div>
            </div>
            <PaymentRequest ref="paymentRequestRef" :disabled="!isEdit" mode="edit" :dicts="dicts" :isEdit="isEdit" />
            <div>
                <!-- 请款单的时候 展示的审核意见 -->
                <IdeaInput ref="ideaInputRef" :show="user_perm.includes('5') && orderData.order_status == '1'"
                    :review="orderData.review?.review" />
                <!-- 新建付款单 -->
                <add-payMent v-if="user_perm.includes('6') && orderData.payment_order_is_create == 1" ref="addPayMentRef"
                    :orderData="orderData" />
                <edit-Pay-ment v-if="user_perm.includes('7') && orderData.payment_order_is_create == 0" ref="editPayMentRef"
                    :data="orderData" />
                <div v-if="!user_perm.includes('7')">
                    <template v-for="item in orderData.payment_order" :key="item.id">
                        <PayMent :orderData="orderData" :formData="item" :dicts="dicts" />
                    </template>
                </div>
                <!-- 展示已有付款单 -->

                <!-- 进入付款单流程的时候 展示的审核意见 5代表审核意见 -->
                <IdeaInput ref="parymentIdeaInputRef"
                    :show="user_perm.includes('5') && orderData.order_status != '1' && orderData.payment_status == '2'"
                    :review="orderData.review?.payment_review" />
            </div>
            <div class="buts">
                <template v-if="orderData.order_status != '10'">
                    
                    <el-button  v-if="orderData.duplicate_payment_perm" @click="handleRePay" class="f-left"> 再次付款 </el-button>
                    <el-button v-if="user_perm.includes('4')" class="f-left" @click="handleClose"> 作 废 </el-button>
                    <!-- 驳回条件是什么-->
                    <el-button v-if="user_perm.includes('3')" @click="handleReject" class="f-left" type="danger"> 驳 回
                    </el-button>
                    <el-button v-if="user_perm.includes('6') && orderData.payment_order_is_create == 1" class="f-left"
                        @click="handleAddPaymentOrder"> 新建付款单 </el-button>
                    <el-button v-if="user_perm.includes('7') && orderData.payment_order_is_create == 0" class="f-left"
                        @click="handleEditPaymentOrder"> 编辑付款单 </el-button>
                    <el-button v-if="user_perm.includes('5') || user_perm.includes('9')" class="f-left"
                        @click="handleConfirm"> 确 认 </el-button>
                    <el-button v-if="user_perm.includes('2')" type="primary" class="f-left" @click="handleEdit">
                        {{ isEdit ? '保存请款单' : '编辑请款单' }}
                    </el-button>
                </template>
                <!-- lqy 还原代码-->
                <el-button class="f-left" @click="close">取 消</el-button>
            </div>
            <!-- 操作记录 -->
            <div style="margin-top: 10px; padding-left: 42px">
                <treeText :data="orderData.record"></treeText>
            </div>
        </popup>
    </div>
    <FieldsDialog ref="fieldsRef" @confirm="close" />
</template>

<script setup lang="ts">
import bufenzhifu from '@/assets/images/bufenzhifu.jpg'
import daiishenhe from '@/assets/images/daiishenhe.jpg'
import daizhifu from '@/assets/images/daizhifu.jpg'
import yifukuan from '@/assets/images/yifukuan.jpg'
import { ElMessage } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import IdeaInput from './idea.vue'
import treeText from '@/components/treeText/index.vue'
import PayMent from './payment/payment.vue'
import AddPayMent from './payment/add-payment.vue'
import EditPayMent from './payment/edit-payment.vue'
import { getDetail, confirm, saveEdit, addPaymentOrder, editPaymentOrder, listAll, closeOrder, rePay } from '@/api/financial/lists'
import FieldsDialog from './fields.vue'
import PaymentRequest from './payment-request/payment-request.vue'
const emits = defineEmits(['refresh'])
// 组件实例
const popupRef = shallowRef<InstanceType<typeof Popup>>()
// 打开弹窗
const open = (order_id: string) => {
    popupRef.value?.open()
    nextTick(async () => {
        console.log('11111')
        orderData.value = await getDetail({ id: order_id })
        console.log('orderData.value.user_perm')
        console.log(orderData.value.user_perm)
        user_perm.value = orderData.value?.user_perm?.permissions || []
        paymentRequestRef.value.setFormData(orderData.value)
        dicts.value = await listAll()
        // paymentRequestRef.value.setFormData(orderData.value);
    })
}
// 请款表单
const paymentRequestRef = ref()
const dicts = ref()
// 当前请款单的详情数据
const orderData = ref({
    id: '',
    flow_id: '',
    project_id: '',
    unit_id: '',
    creator: '',
    time: [''],
    node_start_time: '',
    node_end_time: '',
    node_output_value: 0,
    payment_ratio: 0,
    labor_cost: 0,
    labor_cost_tax_points: 0,
    invoice_amount: 0,
    award: [{ award_id: '', type_id: '', amount: 0, remark: '' }],
    remark: '',
    attachment: [],
    payment_order: [],
    payment_status: '',
    total_payment_amount: 0,
    order_payment_amount: 0,
    labor_cost_deduction_amount: '',
    payPelpleBL: '',
    payment: '',
    order_status: '',
    order_status_text: '',
    review: { payment_review: [], review: [] },
    record: [],
    user_perm: { permissions: [] },
    payment_order_is_create: 0 // 驳回时判断当前字段 1 创建付款单  0 编辑付款单
})
const orderDataCopy = JSON.parse(JSON.stringify(orderData.value))
const user_perm = ref<any>([])
// 关闭弹窗
const close = () => {
    popupRef.value?.close()
    emits('refresh')
    setTimeout(() => {
        if (!paymentRequestRef.value) return
        isEdit.value = false
        orderData.value = JSON.parse(JSON.stringify(orderDataCopy))
        paymentRequestRef.value.clearFormData()
    }, 500)
}
// 请款单编辑
const isEdit = ref(false) // 请款单是否可以编辑
const handleEdit = async () => {
    if (isEdit.value) {
        if (!paymentRequestRef.value) return
        const params = await paymentRequestRef.value.getFormData()
        // 参数过滤
        const filterParams = {
            id: params.id,
            flow_id: params.flow_id,
            project_id: params.project_id,
            unit_id: params.unit_id,
            creator: params.creator,
            node_start_time: params.node_start_time,
            node_end_time: params.node_end_time,
            node_output_value: params.node_output_value,
            payment_ratio: params.payment_ratio,
            labor_cost: params.labor_cost,
            labor_cost_tax_points: params.labor_cost_tax_points,
            invoice_amount: params.invoice_amount,
            remark: params.remark,
            award: params.award,
            attachment: params.attachment
        }
        await saveEdit(filterParams)
        close()
    }
    isEdit.value = !isEdit.value
}
// 确认审核
const ideaInputRef = ref()
const parymentIdeaInputRef = ref()
const handleConfirm = async () => {
    let type = 'review'
    let summary = ideaInputRef.value.formObj.summary
    if (user_perm.value.includes('5') && orderData.value.order_status != '1' && orderData.value.payment_status == '2') {
        type = 'payment_review'
        summary = parymentIdeaInputRef.value.formObj.summary
    }
    if (summary == '') {
        ElMessage.warning('请填写审核意见')
    } else {
        await confirm({
            order_id: orderData.value.id,
            summary,
            type
        })
        close()
    }
}
// 付款单 驳回
const fieldsRef = ref()
const handleReject = () => {
    fieldsRef.value.open(orderData.value.id)
}
// 付款单 作废
const handleClose = async () => {
    await closeOrder({ order_id: orderData.value.id })
    close()
}
// 付款单 新增
const addPayMentRef = ref()
const handleAddPaymentOrder = async () => {
    const params = addPayMentRef.value?.getFormData()
    await addPaymentOrder(params)
    close()
}
// 付款单 编辑
const editPayMentRef = ref()
const handleEditPaymentOrder = async () => {
    const params = editPayMentRef.value?.getFormData()
    await editPaymentOrder(params)
    close()
}
// 付款单 再次付款
const handleRePay = async () => {
    await rePay({ order_id: orderData.value.id })
}
defineExpose({ open })
</script>

<style scoped lang="scss">
$bor-color: #eeeff0;

::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    border: 0 !important;
    color: #666666;
    cursor: not-allowed;
}

::v-deep .el-input.is-disabled .el-input__wrapper {
    background-color: #fff !important;
}

::v-deep .el-image__error {
    background-color: #fff !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #666666;
    cursor: not-allowed;
}

.fontcolor {
    color: #666666;
}

.el-col {
    border-right: 1px solid $bor-color;
    border-top: 1px solid $bor-color;
    align-items: center;
    padding: 2px;

    &:nth-child(4n) {
        border-right: 0;
    }
}

.el-form-item {
    margin-bottom: 0;
    align-items: center;
}

::v-deep .el-form-item__label {
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}

.bor {
    border-bottom: 1px solid $bor-color;
    border-left: 1px solid $bor-color;
    border-right: 1px solid $bor-color;

    .bor-title {
        width: 100%;
        height: 40px;
        padding: 10px;
        background-color: #f8f8f8;
    }

    .zhangMain {
        position: absolute;
        right: 30px;
        top: 20px;
        z-index: 0;
        width: 120px;
        height: 120px;
        transform: rotate(20deg);

        .zhang {
            width: 100%;
            height: 100%;
            opacity: 0.6;
        }
    }
}

::v-deep .el-form-item__error {
    z-index: 10;
}

.buts {
    width: 100%;
    height: 50px;
    padding-top: 20px;

    .el-button {
        float: right;
    }
}

//<!-- lqy 还原代码-->
.f-left {
    margin-left: 10px;
}

::v-deep .span {
    .el-input__inner {
        width: 133px;
    }

    .el-input__suffix-inner {
        display: none;
    }
}

::v-deep .el-form-item__error {
    top: 80%;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}</style>
